<script setup lang="ts">
import RichTextHighlighter from '@/components/RichTextHighlighter.vue'
import ComputeProgress from '@/components/ComputeProgress.vue'
import { ref, reactive, onMounted, computed } from 'vue';
import 'animate.css/animate.min.css';
import { useRouter } from 'vue-router'
import { useStore } from '@/stores/data'
import SwitchToggle from '@/components/SwitchToggle.vue'
import { dialog } from '@/utils/dialog'

import Orchestrator from "@/logic/audioOrchestrator";

const store = useStore();
const router = useRouter()

// 导入图片
import titleImg from '@/assets/images/config/title.png';
import icon1 from '@/assets/images/config/icon1.png';
import icon1Active from '@/assets/images/config/icon1_active.png';
import icon2 from '@/assets/images/config/icon2.png';
import icon2Active from '@/assets/images/config/icon2_active.png';
import icon3 from '@/assets/images/config/icon3.png';
import icon3Active from '@/assets/images/config/icon3_active.png';

const showId = ref(store.configTabId)

if(!store.runningData && !store.loading) {
  store.showOpen({})
}

// 示例数据
const tabs = ref([
  {id: 1, text: '声音配置', active: true},
  {id: 2, text: '主话术设置', active: false},
  {id: 3, text: 'DeepSeek', active: false}
]);

// 获取图标函数
const getIconSrc = (item: {id:number, active:boolean}) => {
  if (item.id === 1) return item.active ? icon1Active : icon1;
  if (item.id === 2) return item.active ? icon2Active : icon2;
  if (item.id === 3) return item.active ? icon3Active : icon3;
  return '';
};

// 文本缓冲区：main 一个整篇；其余 *Txt 用“每行一个”的多行框
const mainTxtRaw = ref('')           // 显示为一整篇话
// 切换标签页
const tabTap = (id: number) => {
  showId.value = id
  store.configTabId = showId.value
  tabs.value.forEach(item => {
    item.active = item.id === id;
  });
  if(id === 3) {
    if(!mainTxtRaw.value) return
    store.updateConfig({mainTxt: buildMainTxtBySentenceMerge(mainTxtRaw.value)})
  }
};
tabTap(showId.value)
// 声音配置跳转-自行上传
const toUpload = () => {
  if(!store.runningData) {
    store.showOpen({})
    return 
  }
  router.push('/soundUpload')
}
// 声音配置跳转-选择音频
const toChoose = () => {
  if(!store.runningData) {
    store.showOpen({})
    return 
  }
  router.push('/soundChoose')
}

const prohibitedOrigin = ref('');
const prohibitedTarget = ref('');

const isDisabled = ref(false);
const showBottomPopup = ref(false); // helep提示弹窗（原有 DeepSeek 弹窗）
const showOpenComputerPopup = ref(false); // 开启云电脑弹窗
const showClosecloudPopup = ref(false); // 关闭云电脑弹窗

// 云算力相关状态
const isCloudComputeEnabled = ref(false); // 云算力开启状态
const toggleCloudCompute = (enabled: true) => { isCloudComputeEnabled.value = enabled }

// 编辑器
const editorRef = ref<any>(null)
let editor: any = null;

// 方法
const addProhibited = () => {
  if (!prohibitedOrigin.value || !prohibitedTarget.value) {
    dialog.alert({message: '请先输入违禁词和平替词'});
    return;
  }
  let bannedlist = form.bannedlist
  bannedlist.push({origin: prohibitedOrigin.value, target: prohibitedTarget.value})
  form.bannedlist = bannedlist
  
  store.updateConfig({bannedlist: bannedlist}).then(() => {
    dialog.alert({ iconType: 'sc', message: '添加成功'});
  })
  
  prohibitedOrigin.value = '';
  prohibitedTarget.value = '';
};

const viewProhibited = () => { router.push('/prohibited') };

const detection = () => { editorRef.value?.applyHighlight?.() };

const enableMainChange = (value: any) => {
  form.enableMain = value.detail.value
  store.updateConfig({enableMain: value.detail.value})
};
const rewriteChange = (value: any) => {
  form.mainReload = value.detail.value
  store.updateConfig({mainReload: value.detail.value})
};

// deepseek
const deepseekSet = () => { router.push('/deepseekSet') }
const toTest = () => { router.push('/deepseekTest') }
const helpTap = () => { showBottomPopup.value = true }

// 本地表单（直接拷贝后端对象）
const form = reactive<any>({})
const original = ref<any>({})

// 深拷贝
const cloneDeep = (obj: any) => JSON.parse(JSON.stringify(obj))

// 初始化
onMounted(async () => {
  await store.getProfile()
  await store.getConfig()
  initForm()
  await store.runningInstance(store.userInfo.licenseKey)

  // ====== 注册视频号 WX 回调（不会二次 init，仅设置回调）======
  Orchestrator.setWxHandlers({
    onQr: ({ qrcode_base64, qr_mime }) => {
      wxState.qrBase64 = qrcode_base64 || ''
      wxState.qrMime   = qr_mime || 'image/png'
      showWxPopup.value = true
    },
    onQrStatus: (qr_status: number) => {
      wxState.qrStatus = Number(qr_status)
      // 0 = 登录成功，等待开播
    },
    onLoginOk: (data: any) => {
      wxState.nickname = data?.nickname || ''
      wxState.username = data?.username || ''
    },
    onRoomStatus: (live_status: number) => {
      wxState.liveStatus = Number(live_status)
      if (live_status === 1) {
        // 已开播 → 跳转并连接音频
        proceedToLiveAfterWx()
      }
    },
    onStatus: (state: string) => {
      wxState.workerState = String(state || '')
    },
    onRaw: (_: any) => {}
  })
})

// 初始化表单
function initForm() {
  const src = cloneDeep(store.userConfig || {})
  Object.keys(src).forEach(k => (form[k] = src[k]))
  original.value = cloneDeep(src)
  // mainTxt：把数组拼成一整篇话
  mainTxtRaw.value = Array.isArray(form.mainTxt) ? form.mainTxt.join('') : (form.mainTxt || '')
}

// ============ 提交前的转换逻辑 ============
function buildMainTxtBySentenceMerge(text: string): string[] {
  const lines = (text || '')
    .split('\n')
    .map(s => s.trim())
    .filter(s => s !== '')
  let sentences: string[] = []
  const re = /[^。！？]+[。！？]+|[^。！？]+$/g
  lines.forEach(line => {
    const parts = line.match(re)
    if (parts) sentences.push(...parts)
    else sentences.push(line)
  })
  sentences = sentences.filter(s => {
    const t = s.trim()
    return t !== '' && t.length >= 2
  })
  const combined: string[] = []
  let tmp = ''
  for (let i = 0; i < sentences.length; i++) {
    tmp += sentences[i]
    if (tmp.length >= 50) {
      combined.push(tmp)
      tmp = ''
    }
  }
  if (tmp) combined.push(tmp)
  return combined
}
function splitLines(text: string): string[] {
  return (text || '')
    .split('\n')
    .map(s => s.trim())
    .filter(s => s !== '')
}
function isEqual(a: any, b: any) {
  return JSON.stringify(a) === JSON.stringify(b)
}
function diffObject(curr: any, base: any) {
  const out: any = {}
  const keys = new Set([...Object.keys(curr || {}), ...Object.keys(base || {})])
  keys.forEach(k => {
    if (!isEqual(curr[k], base[k])) out[k] = curr[k]
  })
  return out
}
async function updateDeepseek() {
  if(!form.dsUser) {dialog.alert({ message: '请输入内容'}); return}
  await store.updateConfig({dsUser: form.dsUser})
  await store.getConfig()
  dialog.alert({ iconType: 'sc', message: '更新成功'});
}

// ==================== 【新增】视频号 WX 扫码与开播引导 ====================
const showWxPopup = ref(false)
const wxState = reactive({
  qrBase64: '',
  qrMime: 'image/png',
  qrStatus: -1 as number,        // 0=登录成功; 1=二维码超时; 2=待扫码; 3=已扫码待确认; 4/5/6=异常
  liveStatus: -1 as number,      // 1=开播, 2=已结束, 其它=未开播/未知
  workerState: '' as string,     // "stopped" 等
  nickname: '' as string,
  username: '' as string
})
const wxQrImgUrl = computed(() =>
  wxState.qrBase64 ? `data:${wxState.qrMime};base64,${wxState.qrBase64}` : ''
)
const wxQrStatusText = computed(() => {
  const map: Record<number, string> = {
    0: '登录成功',
    1: '二维码超时',
    2: '请使用微信扫码',
    3: '已扫码，等待手机确认',
    4: '异常/超时',
    5: '请求失败',
    6: '登录异常'
  }
  return map[wxState.qrStatus] ?? (wxState.qrStatus >= 0 ? `未知(${wxState.qrStatus})` : '等待中')
})
const wxLiveStatusText = computed(() => {
  if (wxState.liveStatus === 1) return '已开播'
  if (wxState.liveStatus === 2) return '已结束'
  if (wxState.liveStatus >= 0)  return `未开播/未知(${wxState.liveStatus})`
  return '未获取'
})
async function proceedToLiveAfterWx() {
  store.muc = localStorage.getItem("muc") || ""
  if (!store.muc) {
    return router.push('/soundChoose')
  }
  if (!store.userConfig?.mainTxt?.length) {
    dialog.alert({ message: '请输入主话术' })
    return
  }
  showWxPopup.value = false
  await Orchestrator.unlockAudio()
  await router.push('/live')
  setTimeout(() => {
    Orchestrator.connectSynth()       // 跳转后再连 audio
  }, 150)
}

// ==================== 修改：提交逻辑 ====================
async function submitChanges(type?: string) {
  if(!store.runningData) {
    store.showOpen({})
    return 
  }

  // ====== 视频号（platform===2）：先扫码，再等开播 ======
  if (store.platform === 2) {
    if (wxState.liveStatus === 1) {
      // 已开播就直接进入收尾
      await proceedToLiveAfterWx()
      return
    }
    // 未开播 → 拉起扫码弹窗并请求二维码（内部自动连接 /ws/wx）
    showWxPopup.value = true
    Orchestrator.wxStart()
    return
  }

  // ====== 原有抖音/其它平台逻辑：不改 ======
  console.log(store.platform)
  console.log(1)

  store.updateConfig({enableAll: true})
  store.muc = localStorage.getItem("muc") || ""
  if(!store.muc) {
    console.log(2)
    return router.push('/soundChoose')
  }
  if(store.isLive) {
    console.log(3)
    await Orchestrator.forceRefreshConfig();
    router.push('/live')
  } else {
    console.log(4)
    await Orchestrator.unlockAudio();
    if(store.userConfig.mainTxt.length > 0) {
      console.log(5)
      await Orchestrator.ensureConnected?.();
      store.updateConfig({enableMain: true})
      router.push('/live')
    }else {
      console.log(6)
      console.log("message", "请输入主话术")
      dialog.alert({message: '请输入主话术'});
    }
  }
}

async function dyNameBlur() {
  await store.updateConfig({dyName: form.dyName})
}
</script>

<template>
  <div class="config-page animate__animated animate__fadeIn" style="--animate-duration: 0.5s;">
    <div class="config-top-bg"></div>
    <div class="config-top">
      <!-- 返回按钮和云算力控制 -->
      <div class="header">
        <button class="back-button fff" @click="router.back()">
          <span class="back-icon">←</span>
        </button>
        
        <!-- 云算力控制区域 -->
        <div class="cloud-compute-control">
          <ComputeProgress 
            :initial-enabled="isCloudComputeEnabled"
            @toggle="toggleCloudCompute"
          />
        </div>
      </div>
      <div class="config-top-cont">
        <img class="title" :src="titleImg" alt="标题"></img>
        <div class="config-tabs">
          <div class="item animate__animated" v-for="(item, index) of tabs" :key="index"
            :class="[item.active ? `active${item.id} active animate__fadeInUp` : `animate__delay-${item.id} animate__fadeInUp`]"
            @click="tabTap(item.id)"
            :style="{
              animationDelay: `${index * 0.1}s`,
              '--animate-duration': '0.3s'
            }">
            <div class="step">第{{item.id}}步</div>
            <div class="require" v-if="item.active">必填</div>
            <div class="icon" :class="`icon${item.id}`">
              <img :src="getIconSrc(item)" alt="图标"></img>
            </div>
            <div class="text">{{item.text}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="config-content">
      <!-- 声音 -->
			<div class="sound" v-if="showId === 1">
				<div class="sound-item xuanze animate__fadeInUp animate__delay-1" @click="toChoose">
          <img src="@/assets/images/config/sound/xuanze-icon.png" alt=""></img>
					<div class="title">选择音频</div>
          <div class="sub-title">平台支持五种主流语种，内置20种风格多样的<br/> 声音模型，任选喜欢的语音风格进行体验</div>
				</div>
        <div class="sound-item shangchuan animate__fadeInUp animate__delay-2" @click="toUpload">
          <img src="@/assets/images/config/sound/shangchuan-icon.png" alt="">
           <div class="title">自行上传</div>
           <div class="sub-title">请上传一段3-10秒的清晰语音(.wav格式)<br/> 发音标准、无杂音，建议情感表达丰富</div>
				</div>
			</div>
      <!-- 主话术 -->
      <div class="broadcast" v-if="showId == 2">
				<div class="broadcast-cont">
					<div class="padding-block">
						<div class="broadcast-title animate__fadeInUp  animate__delay-1">
							<div>违禁词</div>
							<div class="sub">帮助用户检查话术内容是否包含违禁词，保证直播效果</div>
						</div>
						<div class="prohibit animate__fadeInUp  animate__delay-2">
							<div class="ipt-block">
                <input class="ipt" type="text" placeholder="请输入违禁词" v-model="prohibitedOrigin"/>→
                <input class="ipt" type="text" placeholder="请输入平替词" v-model="prohibitedTarget"/>
              </div>
							<div class="opt-block">
                <div class="opt" @click="addProhibited">添加</div>
							  <div class="opt view" @click="viewProhibited">查看</div>
              </div>
						</div>
						<div class="broadcast-title animate__fadeInUp animate__delay-3">
							<div>
                <span style="margin-right: 10px;">主话术设置</span>
                <SwitchToggle :modelValue="form.enableMain" @change="enableMainChange"/>
              </div>
							<div class="subBtn" :class="{disabled: isDisabled}" @click="detection">检测违禁词</div>
						</div>
            <div class="textarea-block huashu animate__fadeInUp animate__delay-4">
              <RichTextHighlighter ref="editorRef" v-model="mainTxtRaw"/>
						</div>
					</div>
					<div class="rewrite animate__fadeInUp animate__delay-5">
						<div class="rewrite-title">
							<div class="text">主话术实时重写</div>
              <SwitchToggle :modelValue="form.mainReload" @change="rewriteChange"/>
						</div>
						<div class="rewrite-subtitle">是否开启AI文案实时重写功能，每次开播建议重新开关主话术</div>
					</div>
				</div>
			</div>
			<div class="broadcast-btnBox animate__fadeInUp animate__delay-6" v-if="showId == 2">
				<button class="live-btn" @click="tabTap(3)">下一步</button>
			</div>

      <!-- DeepSeek -->
      <div class="deepseek" v-if="showId == 3">
				<div class="deepseek-items animate__fadeInUp animate__delay-1" @click="deepseekSet">
					<div class="deepseek-items-title">
						<div class="text">配置DeepSeek</div>
						<div class="icon"></div>
					</div>
				</div>
				<div class="deepseek-items animate__fadeInUp animate__delay-2">
					<div class="deepseek-items-title">
						<div class="text">告诉我您希望AI扮演的角色</div>
						<div class="help" @click="helpTap"></div>
					</div>
					<div class="textarea-block">
						<textarea maxlength="-1" class="textarea" placeholder-style="color: #BFBFBF;"  v-model="form.dsUser" placeholder="请输入"></textarea>
					</div>
					<div class="button-block">
						<button @click="toTest">AI测试</button>
						<button @click="updateDeepseek">更新配置</button>
					</div>
				</div>
				<div class="deepseek-items animate__fadeInUp animate__delay-3" v-if="store.platform == 1">
					<div class="deepseek-items-title">
						<div class="text">抖音号</div>
						<input placeholder-style="color: #BFBFBF;" class="ipt" v-model="form.dyName" type="text" @blur="dyNameBlur" placeholder="请输入抖音号"/>
					</div>
				</div>
				<button class="live-btn animate__fadeInUp animate__delay-4" @click="submitChanges">{{store.isLive ? '进入直播' : '开启直播'}}</button>
			</div>
    </div>
  </div>

  <!-- AI扮演角色提示弹窗（原有） -->
  <div v-if="showBottomPopup" class="bottom-popup-overlay" @click="showBottomPopup = false">
    <div class="bottom-popup" @click.stop>
      <div class="deepseek-popup">
        <div class="deepseek-popup-title">告诉 <text style="color: #006CFF;">DeepSeek</text> 你想让他扮演什么角色越详细回复Ta越好</div>
        <div class="deepseek-popup-content">
          <img class="deepseek-icon" src="@/assets/images/config/deepseek/deepseek.png" mode=""></img>
          <div class="items">
            <div class="tit">
              <div class="tit-line"></div>
              <div class="tit-text">例如您是<text>带货主播</text>：</div>
            </div>
            <div class="con">告诉他您的商品相关信息，每个产品挂在几号链接，总之就是把你知道的都告诉DeepSeek，他就能复制出来一个你，实现自定义顺序或随机触发关键词回复弹幕，介绍商品并促单成交。</div>
          </div>
          <div class="items">
            <div class="tit">
              <div class="tit-line"></div>
              <div class="tit-text">例如您是<text>游戏主播</text>：</div>
            </div>
            <div class="con">告诉他游戏类型、名称、特色玩法以及其它的深入内容。生成一个智能主播 ，他将会随机或按顺序自动插入AI话术进行打乱，永不重复。进入欢迎，送礼感谢，关注点赞以及转化全自动互动。读取弹幕，无需关键词，精准回复用卢。</div>
          </div>
          <div class="items">
            <div class="tit">
              <div class="tit-line"></div>
              <div class="tit-text">例如您是<text>游戏主播</text>：</div>
            </div>
            <div class="con">告诉他游戏类型、名称、特色玩法以及其它的深入内容。生成一个智能主播 ，他将会随机或按顺序自动插入AI话术进行打乱，永不重复。进入欢迎，送礼感谢，关注点赞以及转化全自动互动。读取弹幕，无需关键词，精准回复用卢，关注点赞以及转化全自动互动。读取弹幕，无需关键词，精准回复用卢，关注点赞以及转化全自动互动。读取弹幕，无需关键词，精准回复用卢。</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 【新增】视频号：微信二维码弹窗 -->
  <div v-if="showWxPopup" class="bottom-popup-overlay" @click="showWxPopup = false">
    <div class="bottom-popup" @click.stop>
      <div class="ws-popup" style="display:flex; flex-direction: column;  gap:16px; align-items:flex-start;">
        <div >
          <!-- <div style="font-weight:600; margin-bottom:8px;">视频号登录与开播</div> -->
          <div style="font-size:12px; color:#fff; line-height:1.6;">
            1. 截图保存二维码发送到其他设备，
            <br/>使用微信扫描右侧二维码并在手机上确认登录；<br/>
            2. 登录成功后，等待直播间状态变为“已开播”；<br/>
            3. 检测到“已开播”会自动跳转到直播页并连接音频。<br/>
          </div>

          <div style="margin-top:12px; font-size:13px;">
            <div>登录状态：<b>{{ wxQrStatusText }}</b></div>
            <div>直播状态：<b>{{ wxLiveStatusText }}</b></div>
            <div v-if="wxState.workerState">Worker：<b>{{ wxState.workerState }}</b></div>
            <div v-if="wxState.nickname" class="muted">昵称：{{ wxState.nickname }}</div>
          </div>

          <div style="margin-top:12px; display:flex; gap:8px; flex-wrap:wrap;">
            <button class="live-btn" @click.stop="Orchestrator.wxStart()">刷新二维码</button>
            <button class="live-btn" style="background:#666;" @click.stop="showWxPopup=false, Orchestrator.wxStop(), Orchestrator.disconnectWx()">关闭</button>
          </div>
        </div>

        <div style="flex:1; display:flex; justify-content:center; align-items:center; background:#fff; border-radius:12px; ">
          <img v-if="wxQrImgUrl" :src="wxQrImgUrl" alt="微信登录二维码" style="max-width:100%; height:auto;" />
          <div v-else class="muted">等待二维码...</div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.ws-popup {
  text-align: center;
  padding: 0 20px;
  padding-bottom: 20px;
  color: #fff;
  >div {
    width: 100%;
  }
}
.config-page {
  width: 100%;
  height: 100vh;
  background-color: #E4F2FD;
  position: relative;
  z-index: 2;
}
.config-top-bg {
  width: 100%;
  height: 352px;
  background-image: url(@/assets/images/config/topBg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 1;
}

.config-top {
  background: transparent;
  position: relative;
  z-index: 2;
}

.config-top-cont {
  padding: 0 16px; // 28rpx / 1.7441 = 16px
}

.config-top-cont .title {
  margin-top: 10px;
  width: 362px;
  height: 66px;
  margin-bottom: 18px;
}

.config-tabs {
  display: flex;
  gap: 19px; // 33rpx / 1.7441 = 19px
  margin-bottom: 9px; // 16rpx / 1.7441 = 9px
}

.config-tabs .item {
  width: 120px; // 209rpx / 1.7441 = 120px
  height: 88px; // 153rpx / 1.7441 = 88px
  background: rgba(255,255,255,0.5);
  border-radius: 10px; // 17rpx / 1.7441 = 10px
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
}

.config-tabs .item .step {
  width: 39px; // 68rpx / 1.7441 = 39px
  height: 14px; // 24rpx / 1.7441 = 14px
  background: linear-gradient( 90deg, #009FFF 0%, #B1E2FF 100%);
  border-radius: 10px 0px 10px 0px; // 17rpx / 1.7441 = 10px
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 10px; // 17rpx / 1.7441 = 10px
  color: #FFFFFF;
  text-align: center;
  line-height: 14px; // 24rpx / 1.7441 = 14px
}

.config-tabs .item .require {
  width: 35px; // 61rpx / 1.7441 = 35px
  height: 20px; // 35rpx / 1.7441 = 20px
  line-height: 20px;
  background: rgba(222,72,57,0.1);
  border-radius: 0px 10px 0px 4px; // 17rpx / 1.7441 = 10px, 7rpx / 1.7441 = 4px
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 10px; // 17rpx / 1.7441 = 10px
  color: #DE4839;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
}

.config-tabs .item .icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px; // 9rpx / 1.7441 = 5px
}

.config-tabs .item .icon.icon1 img {
  width: 26px; // 45rpx / 1.7441 = 26px
  height: 26px; // 45rpx / 1.7441 = 26px
}

.config-tabs .item .icon.icon2 img {
  width: 30px; // 52rpx / 1.7441 = 30px
  height: 30px; // 52rpx / 1.7441 = 30px
}

.config-tabs .item .icon.icon3 img {
  width: 34px; // 63rpx / 1.7441 = 36px
  height: 26px; // 49rpx / 1.7441 = 28px
}

.config-tabs .item .text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px; // 28rpx / 1.7441 = 16px
  color: #FFFFFF;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

.config-tabs .item.active1 {
  background: url(@/assets/images/config/step_active.png);
  background-size: 100% 100%;
  width: 120px; // 209rpx / 1.7441 = 120px
  height: 98px; // 171rpx / 1.7441 = 98px
  padding-bottom: 13px; // 23rpx / 1.7441 = 13px
}

.config-tabs .item.active2 {
  background: url(@/assets/images/config/step2_active.png);
  background-size: 100% 100%;
  width: 120px; // 209rpx / 1.7441 = 120px
  height: 98px; // 171rpx / 1.7441 = 98px
  padding-bottom: 13px; // 23rpx / 1.7441 = 13px
}

.config-tabs .item.active3 {
  background: url(@/assets/images/config/step3_active.png);
  background-size: 100% 100%;
  width: 120px; // 209rpx / 1.7441 = 120px
  height: 98px; // 171rpx / 1.7441 = 98px
  padding-bottom: 13px; // 23rpx / 1.7441 = 13px
}

.config-tabs .item.active1 .icon img {
  width: 36px; // 62rpx / 1.7441 = 36px
  height: 31px; // 54rpx / 1.7441 = 31px
}

.config-tabs .item.active2 .icon img {
  width: 30px; // 52rpx / 1.7441 = 30px
  height: 31px; // 54rpx / 1.7441 = 31px
}

.config-tabs .item.active3 .icon img {
  width: 36px; // 63rpx / 1.7441 = 36px
  height: 28px; // 49rpx / 1.7441 = 28px
}

.config-tabs .item.active .text {
  color: #000000;
}
</style>

<style lang="scss" scoped>
.bottom-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}

.bottom-popup {
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateZ(0); // 硬件加速
  will-change: transform, opacity;

  .popup-content {
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        font-size: 18px;
        color: #333;
      }

      .close-btn {
        font-size: 24px;
        background: none;
        border: none;
        color: #999;
      }
    }

    .popup-body {
      flex: 1;
      overflow-y: auto;
    }

    .popup-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 20px;

      button {
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
      }

      .cancel-btn {
        background: #f5f5f5;
        color: #333;
      }

      .confirm-btn {
        background: #006CFF;
        color: white;
      }
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

// 新增动画
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

// 按钮悬停动画
.live-btn {
  transition: all 0.3s ease;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  &:active {
    transform: translateY(0);
  }
}

// 云算力控制样式
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  
  .cloud-compute-control {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .compute-status {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .status-text {
        font-size: 14px;
        color: #ffffff;
        font-weight: 500;
      }
      
      .status-indicator {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        
        &.active {
          .progress-ring {
            position: relative;
            width: 24px;
            height: 24px;
            
            .progress-circle {
              transform: rotate(-90deg);
            }
            
            .progress-text {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 8px;
              color: #006CFF;
              font-weight: bold;
            }
          }
        }
        
        .status-dot {
          width: 8px;
          height: 8px;
          background: #666;
          border-radius: 50%;
        }
      }
    }
    
    .compute-toggle-btn {
      padding: 6px 12px;
      border-radius: 16px;
      border: 1px solid #ffffff;
      background: transparent;
      color: #ffffff;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      
      &.active {
        background: #006CFF;
        border-color: #006CFF;
        color: #ffffff;
        
        &:hover {
          background: #005ce6;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.config-content {
  position: relative;
  z-index: 2;
  background: #E4F2FD;
  border-radius: 20px 20px 0 0;
  // padding-top: 15px; // 26rpx / 1.7441 = 15px
  box-sizing: border-box;
}
// 声音配置
.sound {
  padding-top: 40px; // 70rpx / 1.7441 = 40px
  display: flex;
  flex-direction: column;
  align-items: center;
  &-item {
    position: relative;
    background: url(@/assets/images/config/sound/itemBg.png);
    width: 100%;
    height: 200px;
    background-size: 100% 100%;
    padding: 37px 0 0 36px;
    box-sizing: border-box;
    // img {
    //   width: 430px; // 750rpx / 1.7441 = 430px
    //   height: 198px; // 337rpx / 1.7441 = 193px
    // }
    .title {
      font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
      font-weight: 800;
      font-size: 24px;
      background: radial-gradient(circle at center, #006CFF, #009FFF);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 14px;
    }
    .sub-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #595959;
    }
  }
  &-item.xuanze {
    img {
      width: 113px;
      height: 113px;
      position: absolute;
      right: 20px;
      top: -16px;
    }
  }
  &-item.shangchuan {
    img {
      width: 167px;
      height: 167px;
      position: absolute;
      right: 0;
      top: -37px;
    }
  }
}


// 主话术配置
.broadcast {
  background: #E4F2FD;
  border-radius: 20px; // 35rpx / 1.7441 = 20px
  padding: 20px 16px; // 35rpx / 1.7441 = 20px, 28rpx / 1.7441 = 16px
  box-sizing: border-box;
  &-cont {
    background: #FFFFFF;
    border-radius: 10px; // 17rpx / 1.7441 = 10px
    padding: 20px 0; // 35rpx / 1.7441 = 20px
    box-sizing: border-box;
  }
  .padding-block {
    padding: 0 16px; // 28rpx / 1.7441 = 16px
  }
  &-title {
    display: flex;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px; // 28rpx / 1.7441 = 16px
    color: #00042D;
    align-items: center;
    justify-content: space-between;
    .sub {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px; // 21rpx / 1.7441 = 12px
      color: #006CFF;
      margin-left: 9px; // 16rpx / 1.7441 = 9px
      align-self: flex-end;
      flex: 1;
      text-align: left;
    }
    .subBtn {
      width: 95px; // 166rpx / 1.7441 = 95px
      height: 32px; // 56rpx / 1.7441 = 32px
      background: linear-gradient( 90deg, #006CFF 0%, #009FFF 100%);
      border-radius: 25px; // 44rpx / 1.7441 = 25px
      color: #FFFFFF;
      text-align: center;
      line-height: 32px; // 56rpx / 1.7441 = 32px
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px; // 24rpx / 1.7441 = 14px
    }
    .subBtn.disabled {
      background: linear-gradient( 90deg, #BFBFBF 0%, #E0E4EE 100%);
    }
  }
  .prohibit {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 49px; // 85rpx / 1.7441 = 49px
    background: #FFFFFF;
    border-radius: 8px; // 14rpx / 1.7441 = 8px
    border: 1px solid #DAE2EA; // 2rpx / 1.7441 = 1px
    align-items: center;
    padding: 0 16px; // 28rpx / 1.7441 = 16px
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px; // 28rpx / 1.7441 = 16px
    margin-top: 16px; // 28rpx / 1.7441 = 16px
    margin-bottom: 16px; // 28rpx / 1.7441 = 16px
    .ipt-block {
      display: flex;
      flex: 1;
      overflow: hidden;
      input {
        // height: 49px; // 85rpx / 1.7441 = 49px
        // flex: 1;
        width: 50%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px; // 28rpx / 1.7441 = 16px
        border: 0;
        text-align: center;
        outline: none; // 去掉获取焦点时的边框
        &:focus {
          border: 0;
          outline: none;
          box-shadow: none;
        }
      }
    }
    .opt-block {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .opt {
        flex: 1;
        color: #006CFF;
        font-weight: 500;
        margin-left: 11px; // 20rpx / 1.7441 = 11px
        margin-right: 6px; // 10rpx / 1.7441 = 6px
      }
      .opt.view {
        color: #00042D;
      }
    }
    
  }
  .textarea-block {
    margin-top: 14px; // 24rpx / 1.7441 = 14px
    // width: 100%;
    height: 324px; // 565rpx / 1.7441 = 324px
    background: #F5F6F9;
    border-radius: 8px; // 14rpx / 1.7441 = 8px
    padding: 16px 18px; // 28rpx / 1.7441 = 16px, 31rpx / 1.7441 = 18px
    box-sizing: border-box;
    overflow: scroll;
    textarea {
      width: 100%;
      height: 100%;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px; // 24rpx / 1.7441 = 14px
      box-sizing: border-box;
    }
    .textarea {
      width: 100%;
      height: 100%;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px; // 24rpx / 1.7441 = 14px
      box-sizing: border-box;
    }
  }
  .rewrite {
    border-top: 1px solid #F2F6FF; // 2rpx / 1.7441 = 1px
    padding: 18px 16px 0 20px; // 31rpx / 1.7441 = 18px, 28rpx / 1.7441 = 16px, 35rpx / 1.7441 = 20px
    margin-top: 17px; // 30rpx / 1.7441 = 17px
    box-sizing: border-box;
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px; // 28rpx / 1.7441 = 16px
        color: #1A1A1A;
      }
    }
    &-subtitle {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px; // 21rpx / 1.7441 = 12px
      color: #595959;
    }
  }
}
.broadcast-btnBox {
  padding: 0 16px 20px 16px; // 28rpx / 1.7441 = 16px, 35rpx / 1.7441 = 20px
}

// deepseek
.deepseek {
  background: #E4F2FD;
  padding: 20px 16px; // 35rpx / 1.7441 = 20px, 28rpx / 1.7441 = 16px
  border-radius: 20px; // 35rpx / 1.7441 = 20px
  box-sizing: border-box;
  &-items {
    padding: 20px; // 35rpx / 1.7441 = 20px
    background: #FFFFFF;
    border-radius: 10px; // 17rpx / 1.7441 = 10px
    margin-bottom: 20px; // 35rpx / 1.7441 = 20px
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px; // 28rpx / 1.7441 = 16px
        color: #00042D;
      }
      .icon {
        width: 9px; // 16rpx / 1.7441 = 9px
        height: 14px; // 24rpx / 1.7441 = 14px
        background: url(@/assets/images/config/youjiantou.png);
        background-size: 100% 100%;
      }
      .help {
        width: 22px; // 38rpx / 1.7441 = 22px
        height: 22px; // 38rpx / 1.7441 = 22px
        background: url(@/assets/images/config/help.png);
        background-size: 100% 100%;
      }
      .ipt {
        flex: 1;
        text-align: right;
        font-size: 16px; // 28rpx / 1.7441 = 16px
      }
    }
    .textarea-block {
      margin-top: 15px; // 26rpx / 1.7441 = 15px
      height: 206px; // 359rpx / 1.7441 = 206px
      background: #FFFFFF;
      border: 1px solid #DAE2EA; // 2rpx / 1.7441 = 1px
      width: 100%;
      border-radius: 8px; // 14rpx / 1.7441 = 8px
      padding: 15px 16px; // 26rpx / 1.7441 = 15px, 28rpx / 1.7441 = 16px
      box-sizing: border-box;
      margin-bottom: 16px; // 28rpx / 1.7441 = 16px
      textarea {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px; // 24rpx / 1.7441 = 14px
      }
    }
    .button-block {
      display: flex;
      justify-content: space-between;
      button {
        width: 167px; // 291rpx / 1.7441 = 167px
        height: 44px; // 77rpx / 1.7441 = 44px
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 22px; // 38rpx / 1.7441 = 22px
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px; // 28rpx / 1.7441 = 16px
      }
      button:first-child {
        background: rgba(0,108,255,0.1);
        border: 1px solid #006CFF !important; // 2rpx / 1.7441 = 1px
        color: #006CFF;
      }
      button:last-child {
        color: #ffffff;
        background: linear-gradient( 90deg, #006CFF 0%, #009FFF 100%);
      }
    }
  }
}
// 提示弹窗
.deepseek-popup {
  padding: 29px 16px; // 51rpx / 1.7441 = 29px, 28rpx / 1.7441 = 16px
  background: url(@/assets/images/config/deepseek/bg.png);
  background-size: cover;
  &-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px; // 35rpx / 1.7441 = 20px
    color: #00042D;
    padding: 0 15px; // 26rpx / 1.7441 = 15px
    line-height: 33px; // 58rpx / 1.7441 = 33px
    margin-bottom: 24px; // 42rpx / 1.7441 = 24px
  }
  &-content {
    width: 398px; // 694rpx / 1.7441 = 398px
    // height: 495px; // 863rpx / 1.7441 = 495px
    padding-bottom: 35px; // 61rpx / 1.7441 = 35px
    background: #FFFFFF;
    border-radius: 20px; // 35rpx / 1.7441 = 20px
    position: relative;
    .deepseek-icon {
      position: absolute;
      right: 29px; // 50rpx / 1.7441 = 29px
      top: -40px; // 70rpx / 1.7441 = 40px
      width: 64px; // 112rpx / 1.7441 = 64px
      height: 64px; // 112rpx / 1.7441 = 64px
    }
    .items {
      .tit {
        display: flex;
        align-items: center;
        margin-bottom: 3px; // 5rpx / 1.7441 = 3px
        padding-top: 23px; // 40rpx / 1.7441 = 23px
        &-line {
          width: 6px; // 10rpx / 1.7441 = 6px
          height: 14px; // 24rpx / 1.7441 = 14px
          background: #006CFF;
          border-radius: 0px 4px 4px 0px; // 7rpx / 1.7441 = 4px
          margin-right: 8px; // 14rpx / 1.7441 = 8px
        }
        &-text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 14px; // 24rpx / 1.7441 = 14px
          color: #1A1A1A;
          text {
            color: #006CFF;
          }
        }
      }
      .con {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px; // 24rpx / 1.7441 = 14px
        color: #595959;
        line-height: 21px; // 37rpx / 1.7441 = 21px
        padding: 0 14px; // 25rpx / 1.7441 = 14px
      }
    }
  }
}

// 云电脑弹窗
.openComputer-popup {
  width: 430px; // 750rpx / 1.7441 = 430px
  // height: 361.2px; // 630rpx / 1.7441 = 361.2px
  background: linear-gradient( 180deg, #FFFFFF 0%, #E6F3FD 25%, #E7E8FE 100%);
  border-radius: 20.1px 20.1px 0 0; // 35rpx / 1.7441 = 20.1px
  padding: 36.1px 31px 36.7px 31px; // 63rpx / 1.7441 = 36.1px, 54rpx / 1.7441 = 31px, 64rpx / 1.7441 = 36.7px
  box-sizing: border-box;
  position: relative;
  .closeX {
    background: url(@/assets/images/x.png);
    background-size: 100% 100%;
    width: 33.3px; // 58rpx / 1.7441 = 33.3px
    height: 33.3px; // 58rpx / 1.7441 = 33.3px
    position: absolute;
    top: -63.1px; // -110rpx / 1.7441 = -63.1px
    right: 17.8px; // 31rpx / 1.7441 = 17.8px
    z-index: 999999;
  }
  .imagebg {
    width: 263px; // 459rpx / 1.7441 = 263.2px
    height: 263px; // 459rpx / 1.7441 = 263.2px
    position: absolute;
    right: 0;
    top: -87.2px; // -152rpx / 1.7441 = -87.2px
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-tps {
    width: 49.3px; // 86rpx / 1.7441 = 49.3px
    height: 24.1px; // 42rpx / 1.7441 = 24.1px
    line-height: 24.1px; // 42rpx / 1.7441 = 24.1px
    background: #198EFF;
    border-radius: 6.9px 0px 6.9px 0px; // 12rpx / 1.7441 = 6.9px
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 13.2px; // 23rpx / 1.7441 = 13.2px
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 9.2px; // 16rpx / 1.7441 = 9.2px
  }
  &-slogen {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20.1px; // 35rpx / 1.7441 = 20.1px
    color: #00042D;
    margin-bottom: 2.3px; // 4rpx / 1.7441 = 2.3px
    display: flex;
    align-items: center;
    .colors {
      color: #006CFF;
    }
  }
  &-slogen2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16.1px; // 28rpx / 1.7441 = 16.1px
    color: #595959;
    text-align: justified;
    margin-bottom: 16.1px; // 28rpx / 1.7441 = 16.1px
  }
  &-content {
    background: url(@/assets/images/config/computerpopupbg.png);
    background-size: 100% 100%;
    width: 368.1px; // 642rpx / 1.7441 = 368.1px
    height: 95.8px; // 167rpx / 1.7441 = 95.8px
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16.1px; // 28rpx / 1.7441 = 16.1px
    color: #2192FF;
    line-height: 24.1px; // 42rpx / 1.7441 = 24.1px
    text-align: justified;
    margin-bottom: 36.1px; // 63rpx / 1.7441 = 36.1px
    padding: 27px 14.9px 9.2px 14.9px; // 47rpx / 1.7441 = 27px, 26rpx / 1.7441 = 14.9px, 16rpx / 1.7441 = 9.2px
    box-sizing: border-box;
  }
  .live-btn.btn {
    height: 49.9px; // 87rpx / 1.7441 = 49.9px
    background: linear-gradient( 270deg, #006CFF 0%, #009FFF 100%);
    border-radius: 47px; // 82rpx / 1.7441 = 47px
    font-weight: 500;
    font-size: 16.1px; // 28rpx / 1.7441 = 16.1px
  }
}
</style>